<template>
  <div class="bigBox">
    <borderomponent>
      <!-- <template v-slot:content> -->
      <dialogXinzengchengyuan
        :isdialogVisibleNew="isDialogVisible"
        @jianting="jianting"
        @name="getName"
      ></dialogXinzengchengyuan>
      <selectPersonPopup
        @getHeadName="getHeadName"
        @addMembers="addMembers"
        @close="clsoe"
        :isOuterVisible="isOuterVisible"
      ></selectPersonPopup>
      <div class="bigBox-box">
        <switchTab :tabArr="tabArr" @getTabindex="getTabindex"></switchTab>
        <div v-show="TabIndex == 0" class="bigBox-box-tab">
          <el-form
            :model="numberValidateForm"
            ref="numberValidateForm"
            label-width="160px"
            style="text-align: right"
          >
            <div class="bigBox-box-tab-item">
              <el-form-item
                label="队伍名称："
                prop="teamName"
                style="text-align: right"
              >
                <div class="bigBox-box-tab-item-xq">
                  {{ numberValidateForm?.teamName }}
                </div>
              </el-form-item>
              <el-form-item
                label="队伍类型："
                prop="teamType"
                style="text-align: right"
              >
                <div class="bigBox-box-tab-item-xq">
                  {{ numberValidateForm?.teamType }}
                </div>
              </el-form-item>
              <el-form-item
                label="主管单位："
                prop="department"
                style="text-align: right"
              >
                <div class="bigBox-box-tab-item-xq">
                  {{ numberValidateForm?.department }}
                </div>
              </el-form-item>
            </div>
            <div class="bigBox-box-tab-item" style="height: 42px">
              <el-form-item
                hide-required-asterisk="true"
                :rules="{
                  required: true,
                  message: '请输入地址',
                  trigger: 'blur'
                }"
                label="驻地位置:"
                prop="address"
                style="text-align: right"
              >
                <!-- <el-input
                class="bigBox-box-tab-item-xq"
                  placeholder="请输入关键词选择地址"
                  v-model="numberValidateForm.address"
                >
                  <template slot="append">
                    <div class="append-box">
                      <div>选择地址</div>
                      <div class="append-img"></div>
                    </div>
                  </template>
                </el-input> -->
                <div class="bigBox-box-tab-item-xq" v-if="!isEdit">
                  {{ numberValidateForm?.address }}
                </div>
                <NewMap
                  v-if="isEdit"
                  @childByValue="childValue"
                  @getAddress="getAddress"
                  :Newaddress="Newaddress"
                ></NewMap>
              </el-form-item>
              <el-form-item
                label="队伍级别："
                prop="leveled"
                style="text-align: right"
              >
                <div class="bigBox-box-tab-item-xq">
                  {{ numberValidateForm.leveled }}
                </div>
              </el-form-item>
              <el-form-item
                v-if="isDuiwu"
                label="队伍等级:"
                prop="teamLevel"
                hide-required-asterisk="true"
                :rules="{
                  required: true,
                  message: '请选择队伍等级',
                  trigger: 'blur'
                }"
                style="text-align: right"
              >
                <el-select
                  v-if="isEdit"
                  class="bigBox-box-tab-item-xq"
                  v-model="numberValidateForm.teamLevel"
                  placeholder="请选择队伍等级"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.label"
                  >
                  </el-option>
                </el-select>
                <div class="bigBox-box-tab-item-xq" v-if="!isEdit">
                  {{ numberValidateForm?.teamLevel }}
                </div>
              </el-form-item>
              <el-form-item
                v-if="!isDuiwu"
                label="队伍人数："
                prop="teamNum"
                hide-required-asterisk="true"
                :rules="[
                  {
                    required: true,
                    message: '请输入队伍人数',
                    trigger: 'blur'
                  }
                ]"
                style="text-align: right"
              >
                <el-input
                  v-if="isEdit"
                  class="bigBox-box-tab-item-xq"
                  placeholder="请输入队伍人数"
                  v-model="numberValidateForm.teamNum"
                ></el-input>
                <div class="bigBox-box-tab-item-xq" v-if="!isEdit">
                  {{ numberValidateForm?.teamNum }}
                </div>
                <!-- <div class="bigBox-box-tab-item-xq">
                  {{ numberValidateForm.teamNum }}
                </div> -->
              </el-form-item>
            </div>
            <div class="bigBox-box-tab-item">
              <el-form-item
                v-if="isDuiwu"
                label="队伍人数："
                prop="teamNum"
                hide-required-asterisk="true"
                :rules="[
                  {
                    required: true,
                    message: '请输入队伍人数',
                    trigger: 'blur'
                  }
                ]"
                style="text-align: right"
              >
                <el-input
                  v-if="isEdit"
                  class="bigBox-box-tab-item-xq"
                  placeholder="请输入队伍人数"
                  v-model="numberValidateForm.teamNum"
                ></el-input>
                <div class="bigBox-box-tab-item-xq" v-if="!isEdit">
                  {{ numberValidateForm?.teamNum }}
                </div>
                <!-- <div class="bigBox-box-tab-item-xq">
                  {{ numberValidateForm.teamNum }}
                </div> -->
              </el-form-item>
              <el-form-item
                hide-required-asterisk="true"
                :rules="{
                  required: true,
                  message: '请输入负责人',
                  trigger: 'blur'
                }"
                label="负责人:"
                prop="headName"
                style="text-align: right"
              >
                <el-input
                  v-if="isEdit"
                  disabled
                  class="bigBox-box-tab-item-xq"
                  placeholder="请选择负责人"
                  v-model="numberValidateForm.headName"
                >
                  <template slot="append">
                    <div class="append-box" @click="tianjia(true)">
                      <div>选择负责人</div>
                      <div class="append-img renyuan"></div>
                    </div>
                  </template>
                </el-input>
                <div class="bigBox-box-tab-item-xq" v-if="!isEdit">
                  {{ numberValidateForm?.headName }}
                </div>
              </el-form-item>
              <el-form-item
                hide-required-asterisk="true"
                :rules="[
                  {
                    required: true,
                    message: '负责人电话',
                    trigger: 'blur'
                  },
                  {
                    min: 11,
                    max: 11,
                    message: '请输入11位手机号',
                    trigger: 'blur'
                  }
                ]"
                label="负责人电话："
                prop="headPhone"
                style="text-align: right"
              >
                <el-input
                  v-if="isEdit"
                  class="bigBox-box-tab-item-xq"
                  placeholder="请输入负责人电话"
                  v-model="numberValidateForm.headPhone"
                ></el-input>
                <div class="bigBox-box-tab-item-xq" v-if="!isEdit">
                  {{ numberValidateForm?.headPhone }}
                </div>
              </el-form-item>
              <el-form-item v-if="!isDuiwu"></el-form-item>
            </div>

            <el-form-item
              label="队伍概况："
              prop="dsc"
              style="text-align: right"
            >
              <el-input
                v-if="isEdit"
                type="textarea"
                placeholder="请输入队伍概况"
                v-model="numberValidateForm.dsc"
                maxlength="200"
                show-word-limit
                :autosize="{ minRows: 3, maxRows: 3 }"
              >
              </el-input>
              <div class="bigBox-box-tab-item-xq" v-if="!isEdit">
                {{ numberValidateForm?.dsc }}
              </div>
            </el-form-item>
            <Btitle title="队伍装备"></Btitle>
            <div
              style="width: 100%; display: flex; justify-content: flex-start"
            >
              <tx-button-add
                name="新增队伍装备"
                @click="addMaterial"
                v-if="isEdit"
              />
            </div>

            <div>
              <tx-list-table
                :table="table"
                ref="newlistTable"
                row-key="name"
                height="220"
              >
                <tx-table-column-text label="排序" width="60">
                  <template slot-scope="scope">{{
                    scope.scope.scope.$index + 1
                  }}</template>
                </tx-table-column-text>
                <tx-table-column-text label="装备类型">
                  <template slot-scope="scope">
                    <div v-if="!scope.row.editing" class="wenanjuzhong">
                      <span>{{ scope.row.equipageType }}</span>
                    </div>
                    <div v-if="scope.row.editing">
                      <el-select
                        v-model="scope.row.equipageType"
                        placeholder="请选择装备类型"
                        :rules="{
                          required: true,
                          message: '请输入地址',
                          trigger: 'blur'
                        }"
                      >
                        <el-option
                          v-for="item in zboptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.label"
                        >
                        </el-option>
                      </el-select>
                    </div>
                  </template>
                </tx-table-column-text>
                <tx-table-column-text label="装备名称">
                  <template slot-scope="scope">
                    <div v-if="!scope.row.editing" class="wenanjuzhong">
                      <span>{{ scope.row.equipageName }}</span>
                    </div>
                    <div v-if="scope.row.editing">
                      <el-input
                        v-model="scope.row.equipageName"
                        class="input-table-edit"
                        placeholder="请输入姓名"
                      ></el-input>
                    </div>
                  </template>
                </tx-table-column-text>
                <tx-table-column-text label="规格型号">
                  <template slot-scope="scope">
                    <div v-if="!scope.row.editing" class="wenanjuzhong">
                      <span>{{ scope.row.equipageSpecs }}</span>
                    </div>
                    <div v-if="scope.row.editing">
                      <el-input
                        v-model="scope.row.equipageSpecs"
                        class="input-table-edit"
                        placeholder="请输入单位"
                      ></el-input>
                    </div>
                  </template>
                </tx-table-column-text>
                <tx-table-column-text label="装备数量">
                  <template slot-scope="scope">
                    <div v-if="!scope.row.editing" class="wenanjuzhong">
                      <span>{{ scope.row.equipageNum }}</span>
                    </div>
                    <div v-if="scope.row.editing">
                      <el-input
                        type="number"
                        v-model="scope.row.equipageNum"
                        class="input-table-edit"
                        placeholder="请输入职务"
                      ></el-input>
                    </div>
                  </template>
                </tx-table-column-text>
                <tx-table-column-text label="单位">
                  <template slot-scope="scope">
                    <div v-if="!scope.row.editing" class="wenanjuzhong">
                      <span>{{ scope.row.unit }}</span>
                    </div>
                    <div v-if="scope.row.editing">
                      <el-input
                        v-model="scope.row.unit"
                        class="input-table-edit"
                        placeholder="请输入单位"
                      ></el-input>
                    </div>
                  </template>
                </tx-table-column-text>
                <tx-table-column-text label="功能用途">
                  <template slot-scope="scope">
                    <div v-if="!scope.row.editing">
                      <span>{{ scope.row.purpose }}</span>
                    </div>
                    <div v-if="scope.row.editing">
                      <el-input
                        v-model="scope.row.purpose"
                        class="input-table-edit"
                        placeholder="请输入功能用途"
                      ></el-input>
                    </div>
                  </template>
                </tx-table-column-text>
                <tx-table-column-action
                  v-if="isEdit"
                  width="230"
                  label="操作项"
                >
                  <template slot-scope="scope">
                    <el-button
                      type="primary"
                      size="mini"
                      v-if="!scope.row.editing"
                      class="table-edit-btn"
                      @click="handleEdit(scope)"
                      >编辑
                    </el-button>
                    <el-button
                      type="primary"
                      size="mini"
                      v-if="scope.row.editing"
                      @click="handleSave(scope)"
                      class="table-save-btn"
                      >确定
                    </el-button>
                    <el-button
                      size="mini"
                      type="warning"
                      v-if="scope.row.editing"
                      @click="handleCancel(scope)"
                      class="table-cancel-btn"
                      >取消
                    </el-button>
                    <el-button
                      size="mini"
                      type="danger"
                      v-if="scope.row.editing"
                      @click="handleDelete(scope)"
                      class="table-del-btn"
                      >删除
                    </el-button>
                  </template>
                </tx-table-column-action>
              </tx-list-table>
              {{
                $nextTick(() => {
                  $initDragTable($refs['newlistTable'], table.page, 'records')
                })
              }}
            </div>
            <div
              style="
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
              "
            >
              <el-button
                @click="bianji"
                v-if="!isEdit"
                style="
                  border: 1px solid #38c2c6;
                  background: #38c2c6;
                  border-radius: 4px;
                  font-size: 16px;
                  font-family: MicrosoftYaHei;
                  color: rgba(255, 255, 255, 0.9);
                "
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                v-if="isEdit"
                @click="Back"
                class="table-cancel-btn"
                >返回
              </el-button>
              <el-button
                v-if="isEdit"
                @click="submitForm('numberValidateForm')"
                style="
                  border: 1px solid #38c2c6;
                  background: #38c2c6;
                  border-radius: 4px;
                  font-size: 16px;
                  font-family: MicrosoftYaHei;
                  color: rgba(255, 255, 255, 0.9);
                "
                >保存</el-button
              >
            </div>
          </el-form>
        </div>
        <div v-show="TabIndex != 0" class="bigBox-box-tab">
          <Sort></Sort>
        </div>
      </div>
      <!-- </template> -->
    </borderomponent>
  </div>
</template>

<script>
import borderomponent from '@/components/borderomponent/index.vue'
import switchTab from '@/components/switchTab/index.vue'
import Btitle from '@/components/Btitle/index.vue'
import Sort from './components/sort.vue'
import selectPersonPopup from '@/components/selectPersonPopup/index.vue'
import NewMap from '@/components/egis-map/map.vue'
import {
  rescueTeamGetByDepId,
  rescueTeamSaveOrUpdate
} from '@/api/resourceManagement/index.js'
import dialogXinzengchengyuan from '@/components/dialog-xinzengchengyuan.vue'
export default {
  name: 'TeamAdministrator',
  components: {
    borderomponent,
    switchTab,
    Btitle,
    Sort,
    selectPersonPopup,
    NewMap,
    dialogXinzengchengyuan
  },
  data() {
    return {
      isDuiwu: false,
      isEdit: false,
      ids: [],
      componentKey: 0,
      isOuterVisible: false,
      Newaddress: {},
      department: 'xxx',
      isDialogVisible: 0,
      renyuan: '',
      renyuanType: '',
      dialogVisible: false,
      filterText: '',
      renyuanfilterText: '',
      data: [],
      renyaundata: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      numberValidateForm: {
        id: '',
        depId: '', //部门id，暂时自填
        teamName: '', //队伍名称
        teamType: '', //队伍类型
        department: '', //主管单位
        address: '', //驻地位置
        coordinateX: '', //x坐标
        coordinateY: '', //y坐标
        leveled: '', //队伍级别
        teamLevel: '', //队伍等级
        headName: '', //责任人
        headPhone: '', //责任人电话
        equipageList: [],
        teamNum: '',
        areaCode: '',
        headId: ''
      },
      options: [
        {
          value: '0',
          label: '总队'
        },
        {
          value: '1',
          label: '支队'
        },
        {
          value: '2',
          label: '中队'
        },
        {
          value: '3',
          label: '消防站'
        }
      ],

      zboptions: [
        {
          value: '0',
          label: '预警预测装备'
        },
        {
          value: '1',
          label: '个体防护装备'
        },
        {
          value: '2',
          label: '通信信息装备'
        },
        {
          value: '3',
          label: '灭火抢险装备'
        },
        {
          value: '4',
          label: '防汛抢险装备'
        },
        {
          value: '5',
          label: '交通运输装备'
        },
        {
          value: '6',
          label: '工程救援装备'
        },
        {
          value: '7',
          label: '环境监测装备'
        },
        {
          value: '8',
          label: '电力抢修装备'
        }
      ],
      value: '',
      TabIndex: 0,
      tabArr: [
        {
          name: '队伍信息',
          index: 0
        },
        {
          name: '队伍人员',
          index: 1
        }
      ],
      currentTables: {}, //
      table: {
        loading: false,
        query: {},
        sort: {
          descs: ['updateTime']
        },
        page: this.$yzvue.initPage()
      }
    }
  },
  mounted() {
    this.loadTable()
    console.log('records', this.table.page, this.$yzvue.initPage())
  },
  created() {
    this.currentTables = JSON.parse(localStorage.getItem('tempList'))
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    },
    renyuanfilterText(val) {
      this.$refs.newtree.filter(val)
    },
    newdialogVisible(val) {
      console.log(val)
      this.dialogVisible = val
    },
    $route(to, from) {
      console.log('路由跳转监听:', to, from)
      window.location.reload() // 这个方法可行 直接就强制刷新
    }
  },
  methods: {
    Back() {
      this.isEdit = false
    },
    bianji() {
      this.isEdit = true
    },
    getAddress(e) {
      this.numberValidateForm.address = e
    },
    clsoe() {
      this.isOuterVisible = false
    },
    // 开启成员选择
    tianjia(e) {
      this.isOuterVisible = e
      console.log(this.isOuterVisible)
    },
    // 新增成员
    addMembers() {
      this.isOuterVisible = false
      this.isDialogVisible = true
    },
    // 获取负责人
    getHeadName(e) {
      this.isOuterVisible = false
      console.log(e.displayName)
      this.$set(this.numberValidateForm, 'headName', e.displayName)
      this.$set(this.numberValidateForm, 'headPhone', e.phoneNum)
      this.$set(this.numberValidateForm, 'headId', e.id)
      console.log(e.displayName, this.numberValidateForm.headName)
    },
    getName(e) {
      this.numberValidateForm.headPhone = e.phone
      this.numberValidateForm.headName = e.name
      this.numberValidateForm.headId = e.id
    },
    jianting(e) {
      console.log(e)
      this.isDialogVisible = 0
    },
    xinzeng() {
      console.log('新增成员')
      this.isDialogVisible = 1
      this.dialogVisible = false
    },
    childValue(e) {
      console.log(e)
      this.Newaddress = e
      this.Newaddress.address = this.numberValidateForm.address
      // this.numberValidateForm.address = e.address
      this.numberValidateForm.coordinateX = e.latitude
      this.numberValidateForm.coordinateY = e.longitude
      console.log(this.numberValidateForm)
    },
    handleClose() {
      this.dialogVisible = false
      console.log(12234, this.dialogVisible)
      this.$forceUpdate()
    },

    submitForm(formName) {
      console.log(
        this.table.page.records,
        this.numberValidateForm.depId,
        this.numberValidateForm
      )
      this.numberValidateForm.depId = this.$userInfo.orgId
      this.numberValidateForm.areaCode = this.$userInfo.areaCode
      this.numberValidateForm.equipageList = this.table.page.records
      if (
        this.numberValidateForm.coordinateX == '' ||
        this.numberValidateForm.coordinateY == ''
      ) {
        this.$message({
          message: '请选择经纬度',
          type: 'warning'
        })
        return
      }
      this.$refs[formName].validate(valid => {
        if (valid) {
          let data = this.numberValidateForm
          rescueTeamSaveOrUpdate({
            ...data,
            depId: this.$userInfo.orgId,
            ids: this.ids.join()
          }).then(res => {
            console.log(res, '保存成功')
            if (res && res.code == 0) {
              this.isEdit = false
              this.$message.success('保存成功')
            } else {
              this.$message.error('服务端返回数据异常')
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm() {
      this.loadTable()
    },
    // 添加
    addMaterial() {
      this.$yzvue.newAddItem(this.table.page)

      this.$nextTick(() => {
        let container = this.$el.querySelector('.el-table__body-wrapper')
        container.scrollTop = container.scrollHeight
      })
      console.log(this.table.page)
    },
    getTabindex(e) {
      this.TabIndex = e
    },
    handleQuery() {
      this.loadTable()
    },

    async loadTable() {
      let param = this.getQueryParam()
      console.log(param)
      this.table.loading = true
      rescueTeamGetByDepId({ depId: this.$userInfo.orgId }).then(res => {
        console.log(res.data, 'wwwwww')
        if (res.code == 0) {
          this.numberValidateForm = res.data
          this.Newaddress = {
            address: this.numberValidateForm.address,
            latitude: this.numberValidateForm.coordinateX,
            longitude: this.numberValidateForm.coordinateY
          }
          if (
            res.data.teamLevel.includes(
              '消防救援队',
              '森防救援队',
              '森林防火救援队伍',
              '森林防火'
            )
          ) {
            this.isDuiwu = true
          } else {
            this.isDuiwu = false
          }
        }
        this.$yzvue.assembleBody(this.table.page, {
          records: res.data.pageData.list
        })
        console.log(res, this.table.page, 'www')
        this.table.loading = false
        this.$nextTick(() => {
          this.$initDragTable(this.$refs[''], this.table.page, 'records')
        })
        console.log(data, '获取队伍信息')
      })
      let data = { depId: this.$userInfo.orgId }
    },

    getQueryParam() {
      let param = this.$yzvue.assemblePage(this.table)
      let query = this.table.query
      this.$yzvue.appendFilter(param.body.filters, 'name', 'like', query.name)
      return param
    },
    // 编辑
    handleEdit($scope) {
      let {
        scope: { scope }
      } = $scope
      this.$set(this.table.page.records[scope.$index], 'editing', true)
      this.currentTables = JSON.parse(
        JSON.stringify(this.table.page.records[scope.$index])
      ) // 保存当前历史编辑行
      console.log('records---', this.table.page.records)
    },
    // 保存
    handleSave($scope) {
      let {
        scope: { scope }
      } = $scope
      console.log(scope)
      if (
        !scope.row.equipageType ||
        !scope.row.equipageSpecs ||
        !scope.row.equipageName ||
        !scope.row.equipageNum
      ) {
        this.$message({
          message: '请完善队伍装备信息！',
          type: 'warning'
        })
        return
      }
      if (scope.row.is_New_Add) {
        this.$set(this.table.page.records[scope.$index], 'is_New_Add', false)
      }
      this.$set(this.table.page.records[scope.$index], 'editing', false)
      console.log($scope, '12')

      // 请求后台接口更新数据库
    },
    // 取消
    handleCancel($scope) {
      let {
        scope: { scope }
      } = $scope
      console.log('scope.is_New_Add', scope)
      if (scope.row.is_New_Add) {
        this.table.page.records = this.table.page.records.filter(item => {
          return !item.is_New_Add
        })
        return
      }
      this.$set(this.table.page.records, scope.$index, {
        ...this.currentTables,
        editing: false
      })
    },
    //删除
    handleDelete($scope) {
      let {
        scope: { scope }
      } = $scope
      this.ids = [...this.ids, this.table.page.records[scope.$index].id]
      console.log(this.ids, this.table.page.records[scope.$index].id)
      this.table.page.records.splice(scope.$index, 1)
      // 请求后台接口删除数据库数据
    }
    // 机构树
  }
}
</script>
<style lang="scss">
@import '../../../style/variables.scss';
$header-color: $tx-list-table-header-color;
$header-color-select: $tx-color-primary;
.bigBox {
  width: 100%;
  height: 100%;
  position: relative;
  .bigBox-box {
    padding: 20px;
    .bigBox-box-tab {
      margin-top: 20px;
      .bigBox-box-tab-item {
        height: 32px;
        display: flex;
        margin-bottom: 25px;
        line-height: 32px;
        justify-content: space-between;
        // margin-right: 100px;
        .el-form-item__label {
          line-height: 32px !important;
          font-size: 16px;
          font-family: MicrosoftYaHei;
          text-align: right;
          color: #cbe7ff !important;
        }
        .el-input-group__append,
        .el-input-group__prepend {
          background: rgba(124, 173, 216, 0.2) !important;
          border-radius: 0px 4px 4px 0px !important;
          border: 1px solid #7cadd8 !important;
          color: #ffffff;
        }
        .el-form-item {
          width: 33%;
        }
        .bigBox-box-tab-item-xq {
          // line-height: 32px;
          // height: 32px;
          font-size: 16px;
          font-family: MicrosoftYaHei;
          color: #ffffff;
        }
        .append-box {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          font-size: 16px;
          cursor: pointer;
        }
        .append-img {
          width: 14px;
          height: 14px;
          margin-left: 10px;
          background: url('~@/assets/TeamAdministrator/location.png') no-repeat;
        }
      }
    }
  }
  .el-form-item__label {
    line-height: 32px !important;
    font-size: 16px;
    font-family: MicrosoftYaHei;
    color: #cbe7ff !important;
    text-align: right;
  }

  textarea {
    background: transparent; //  背景透明
    border: 1px solid #7cadd8;
  }
  .el-textarea__inner {
    color: #fff !important;
  }
  .el-input__count {
    background-color: transparent;
    color: #7cadd8;
  }
  //表格样式
  .el-table {
    color: $c-font-table;
    border: 0;
    .el-tooltip {
      width: auto !important;
    }
    &::before {
      background: transparent;
    }
  }
  // .el-table tr
  .el-table tr {
    background: rgb(29 63 106);
    &.success-row {
      box-shadow: inset 0px 0px 2px #4a729e;
      background: #274a77;
    }
    &:hover {
      cursor: pointer;
      box-shadow: inset 0px 0px 15px #fff !important;
      td {
        background: #285584 !important;
      }
    }
  }
  .el-table th {
    background-color: $tx-list-table-header-background !important;
    color: #fff;
    border: 0;
    > .cell {
      // display: flex;
      // justify-content: center;
      // align-items: center;
      color: $header-color;
    }
  }
  .el-table--border th,
  .el-table--border td {
    // border-right: 1px solid $tx-list-table-border;
    // border-bottom: 1px solid $tx-list-table-border;
    border: 0 !important;
  }
  .el-table td.el-table__cell,
  .el-table th.el-table__cell.is-leaf {
    border: 0;
  }
  .el-table--border {
    // border-top: 1px solid $tx-list-table-border;
    // border-left: 1px solid $tx-list-table-border;
    border: 0;
  }

  .el-table .caret-wrapper .descending {
    // border-top-color: $header-color;
  }
  .el-table .caret-wrapper .ascending {
    // border-bottom-color: $header-color;
  }
  .el-table .descending .caret-wrapper .descending {
    // border-top-color: $header-color-select;
  }
  .el-table .ascending .caret-wrapper .ascending {
    // border-bottom-color: $header-color-select;
  }

  .cell {
    .el-button--text {
      padding-top: 0px;
      padding-bottom: 0px;
      margin-left: 5px;
    }
  }
  .cell .tx-table-column-action {
    display: inline;
    a {
      margin-left: 0px;
    }
    .el-button--text {
      margin-left: 0px;
    }
  }

  .tx-list-table-header {
    .cell {
      white-space: nowrap;
    }
  }
  .el-loading-mask .el-loading-spinner {
    top: 10%;
  }
}
.dialogBox-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: 474px;
}
.dialogBox-box-left {
  width: 50%;
}
.dialogBox-box-right {
  width: 50%;
}
.treeBox {
  height: 406px;
  overflow: auto;
}
.xuanzechengyuanBox {
  display: flex;
  justify-content: space-between;
}
.tianjiachengyuan {
  margin-bottom: 15px;
  color: #4af6fc;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.chengyuanImg {
  width: 14px;
  height: 14px;
  background: url('~@/assets/TeamAdministrator/icon_add.png');
  margin-right: 8px;
}
.title {
  margin-bottom: 15px;
  color: #fff;
}
.el-tree {
  width: 100%;
  background-color: transparent;
  color: rgba(255, 255, 255, 0.9);
}
// 重置dialog样式
.el-dialog {
  background: transparent;
  //   box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
  //   border-radius: 4px;

  .el-dialog__header {
    background: rgba(6, 50, 88, 0.9);
    padding: 20px 0 0 20px;
    height: 24px;
    line-height: 24px;
  }

  .el-dialog__title {
    // color: #313335;
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
  }

  .el-dialog__headerbtn {
    top: 20px;
    right: 20px;
    height: 14px;
    line-height: 14px;

    .el-dialog__close {
      // color: #354052;
      color: #4af6fc;
      width: 14px;
      height: 14px;
    }
  }

  .el-dialog__body {
    width: calc(100% - 40px);
    padding: 30px 20px 20px;
    // font-size: 0.16px;
    font-size: 0.18px;
    color: #313335;
    background: rgba(6, 50, 88, 0.9);
  }
  .el-dialog__footer {
    background: rgba(6, 50, 88, 0.9) !important;
  }
}
.el-tree-node:focus > .el-tree-node__content {
  background: rgba(74, 246, 252, 0.1);
  box-shadow: inset 0px 0px 10px 0px #4af6fc;
}
.el-tree-node__content:hover {
  background: rgba(74, 246, 252, 0.1);
}
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  background: rgba(74, 246, 252, 0.1);
  box-shadow: inset 0px 0px 10px 0px #4af6fc;
}
.renyuan {
  background: url('~@/assets/TeamAdministrator/input_box-contacts.png')
    no-repeat !important;
}
.chengyuanxiangqing {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  background: url('~@/assets/TeamAdministrator/icon_folder_shut(3).png');
}
.zhedie {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  background: url('~@/assets/TeamAdministrator/icon_folder_shut(2).png');
}
.zhankai {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  background: url('~@/assets/TeamAdministrator/icon_folder_shut(1).png');
}
.geren {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  background: url('~@/assets/TeamAdministrator/icon_folder_shut.png');
}
.dialogBox-box-right {
  border-left: 1px solid #1d5a8f;
  padding-left: 8px;
}
.dialogBox-box-left {
  padding-right: 8px;
}
.el-tree > .el-tree-node {
  display: inline-block;
  min-width: 100%;
}
.el-form-item__label-wrap {
  margin: 0 !important;
}
// .cell {
//   display: flex;
//   justify-content: center !important;
// }
.el-table .el-table__cell.is-center {
  text-align: left;
}
</style>
